<include file="public@myheader" />

<style>

    .row{margin: 0px; width: 100%;}
    .mt20{ margin-top:20px;}
    .font{ font-size: 1.5rem;line-height: 3rem;}
</style>
</head>
<body>

<br>

   <div class="row" style="margin: 15px 2%">
       <button class="btn btn-info adduser" data-method="addForm" data-type="t">添加子账户</button>
   </div>



    

    <div style="width: 98%; margin: 0 auto;"> <table class="layui-hide" id="test" lay-filter="test"></table></div>




    <script type="text/html" id="barDemo">
         <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
<!--        <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-radius" lay-event="exchange">修改</a>-->
    </script>


    <script type="text/html" id="usertype">
        {{#  if(d.user_type == 2){ }}
        <a class="layui-btn layui-btn-xs">点击</a>
        {{#  } else { }}
        <a class="layui-btn layui-btn-normal layui-btn-xs">复制</a>
        {{#  } }}
    </script>



    <script src="__STATIC__/layui/layui.js"></script>

    <script>

        layui.use(['laydate','table','layer'],function () {
            var laydate=layui.laydate;
            var table = layui.table;
            var $ = layui.jquery, layer = layui.layer;
            //日期时间范围
            laydate.render({
                elem: '#test10'
                ,type: 'datetime'
                ,range: true
                ,min: -28 //7天前
                ,max: 1 //7天后
                ,done:function (value,date,endDate) {
                    console.log(value); //得到日期生成的值，如：2017-08-18
                    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                }
            });

            table.render({
                elem: '#test'
                ,url:'sonUserList'
                ,where: {id: 123}
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,limit:20
                ,method:'post'
                ,title: '用户数据表'
                ,cols: [[
                    {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true,hide:false}
                    ,{field:'user_login', title:'用户名', width:210}
                    ,{field:'domain', title:'授权域名'}
                    ,{field:'btime', title:'开始时间'}
                    ,{field:'etime', title:'结束时间'}

                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,page: true
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除该条数据吗？', function(index){
                        console.log(obj.data.id);
                        var id = obj.data.id;
                       $.ajax({
                           url: 'Userson',
                           type: 'GET',
                           datatype: 'json',
                           data: {'id': id},
                           success:function(msg){
                               if(msg.msg){
                                   obj.del();
                                   layer.close(index);
                                   layer.open({
                                       title: 'message'
                                       ,content: '删除成功'
                                       ,anim: 4
                                       ,time:1000
                                   });
                               }else{
                                   layer.open({
                                       title: 'message'
                                       ,content: '删除失败'
                                       ,anim: 6
                                       ,time:1000
                                   });
                               }

                           }
                       })
                    });
                }

                 if(obj.event === 'exchange'){

                      layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['420px', '300px'], //宽高
                        anim: 1,
                        content: $('#foren'),
                        success: function(layero, index){
                          // console.log(layero, index);
                          $('#ids').val(obj.data.id);
                          $('#num').val(obj.data.donum);
                          $('#dates').val(obj.data.etime);
                          $('#btime').val(obj.data.btime);
                        }

                      });
                  }




            });

            //触发事件
            var active ={
                addForm:function () {
                    var that = this;
                    //多窗口模式，层叠置顶
                    layer.open({
                        type: 2 //此处以iframe举例
                        ,title: '添加子账户'
                        ,area: ['500px', '400px']
                        ,shade: 0
                        ,maxmin: true
                        ,offset: [ //为了演示，随机坐标
                            $(window).height()/3
                            ,$(window).width()/3
                        ]
                        ,content: 'addForm'
                        ,btn: ['继续弹出', '全部关闭'] //只是为了演示
                        ,yes: function(){
                            $(that).click();
                        }
                        ,btn2: function(){
                            layer.closeAll();
                        }

                        ,zIndex: layer.zIndex //重点1
                        ,success: function(layero){
                            layer.setTop(layero); //重点2
                        }
                    });
                }
            };

            $('.adduser').on('click', function(){

                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });


        });
    </script>



</body>
</html>